<template>
  <div class="container">
    <!-- 标题 -->
    <el-row class="titleBoxCon clearfix">
      <div>
        <span class="blockTitle">
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          {{ companyName || '--' }}
        </span>
      </div>
      <div class="code">统一社会信用代码：{{ uscc || '--' }}</div>
    </el-row>
    <div class="mainCon">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane label="统一专户信息" name="first">
          <specialAccountList
            v-if="isShowFirst"
            :companyName="companyName"
            :uscc="uscc"
          ></specialAccountList>
        </el-tab-pane>
        <el-tab-pane label="授权项目列表" name="second">
          <accountManageDetail
            v-if="isShowSecond"
            :companyName="companyName"
            :uscc="uscc"
          ></accountManageDetail>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import specialAccountList from './specialAccountList'
import accountManageDetail from './accountManageDetail'
export default {
  name: 'accountManageTab',
  components: {
    specialAccountList,
    accountManageDetail,
  },
  data() {
    return {
      activeName: 'first',
      isShowFirst: true,
      isShowSecond: false,
      topAccountInfo: '',
      companyAccountId: '',
      companyName: '',
      uscc: '',
    }
  },
  created() {
    this.companyName = this.$route.query.companyName
    this.uscc = this.$route.query.uscc
  },
  methods: {
    goBack() {
      this.$router.push({
        path: '/home/yiChangCustomRequirements/enterpriseAccountManage',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/yiChangCustomRequirements/enterpriseAccountManage',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //tabs栏切换
    handleClick(tab, event) {
      if (tab.name == 'first') {
        this.isShowFirst = true
      } else if (tab.name == 'second') {
        this.isShowSecond = true
      }
    },
    getAccountTopInfo() {
      this.axios({
        method: 'post',
        url: 'api-acc/companyaccount/expand/findCompanyAccountDetail',
        data: {
          companyAccountId: this.companyAccountId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.topAccountInfo = response.data.result
          }
        })
        .catch((error) => {
          // this.$message.error("数据获取失败");
        })
    },
  },
}
</script>

<style scoped lang="less">
.titleBoxCon {
  background: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #e3e7e9;
  .blockTitle {
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    color: #333;
    .iconfanhui1 {
      font-size: 18px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
  p {
    margin-top: 10px;
  }
  .code {
    font-size: 14px;
    line-height: 14px;
    color: #666;
    margin-left: 30px;
    margin-top: 10px;
  }
  .seeAccountDetail {
    font-size: 14px;
    color: #66b1ff;
    margin-left: 30px;
    cursor: pointer;
  }
}
.mainCon {
  top: 222px;
  padding: 0;
}
// tab栏切换
.commonTab {
  /deep/ .el-tabs__content {
    background: #fff;
    min-height: 800px;
    padding: 24px;
  }
}
</style>
